<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../../resources/static/dist/jquery/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="../../../../resources/static/dist/bootstrap/css/bootstrap.css">
    <script src="../../../../resources/static/dist/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../../../../resources/static/dist/editOnline/lib/codemirror.css">
    <script src="../../../../resources/static/dist/editOnline/lib/codemirror.js"></script>
    <script src="../../../../resources/static/dist/editOnline/mode/javascript/javascript.js"></script>
    <link rel="stylesheet" href="../../../../resources/static/dist/editOnline/addon/fold/foldgutter.css">
    <script src="../../../../resources/static/dist/editOnline/addon/fold/brace-fold.js"></script>
    <script src="../../../../resources/static/dist/editOnline/addon/fold/comment-fold.js"></script>
    <script src="../../../../resources/static/dist/editOnline/addon/fold/foldcode.js"></script>
    <script src="../../../../resources/static/dist/editOnline/addon/fold/foldgutter.js"></script>
    <link rel="stylesheet" href="../../../../resources/static/dist/editOnline/theme/idea.css">
    <link rel="stylesheet" href="../../../../resources/static/css/contestCompile.css">

</head>
<body>
<div class="content-wrapper">
    <div id="base_content">
        <div class="container">
            <div class="row" style="overflow: hidden">
                <div class="col-md-12">
                    <!--题目名-->
                    <div class="question_title clearfix">
                        <h3>
                            <span>题目ID.</span><span>题目名</span>
                        </h3>
                        <div class="top_button pull-right">
                            <div class="btn_group right_pad">
                                <a class="btn-default btn" href="">我的提交</a>
                                <a class="btn-success btn" href="">返回竞赛</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8 topAndTips" id="topic">
                        <h4>题干信息：</h4>
                        <div class="col-md-12 col-sm-12 col-xs-12">2561651655555555555555555555555555
                        5555555555555555555555555555555555555555555555555555555555555555555555555555555555
                        555555555555555555555555555555555555555555555555555555555555555555555555555555555
                        4847845555555555555555555555555555555555555555555555555555555555555
                        64444444444444444444444444444444444444444</div>
                    </div>
                    <div class="col-md-8 topAndTips" id="tip">
                        <h4>提示信息：</h4>
                        <div class="col-md-12 col-sm-12 col-xs-12">2561651655555555555555555555555555
                            5555555555555555555555555555555555555555555555555555555555555555555555555555555555
                            555555555555555555555555555555555555555555555555555555555555555555555555555555555
                            4847845555555555555555555555555555555555555555555555555555555555555
                            6444444444444444444444444444444444444444</div>
                    </div>
                    <div class="row" id="topInfo">
                        <div class="col-md-12">
                            <div class="contest-question-info pull-right">
                                <ul class="list-group">
                                    <li class="list-group-item"><strong>参与人数</strong><span>1000</span></li>
                                    <li class="list-group-item"><strong>通过人数</strong><span>750</span></li>
                                    <li class="list-group-item"><strong>难易程度</strong><span>3<img src="../../../../resources/static/images/jkf/start.svg" alt=""></span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="editCode">
                <div class="col-md-12">
                    <div class="dropdown col-md-5 col-sm-5 col-xs-5">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" style="width: 150px" aria-expanded="true">
                            <span id="choiceLanguage">请选择语言</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a href="javascript:void 0" class="language">Java</a></li>
                            <li><a href="javascript:void 0" class="language">Javascript</a></li>
                            <li><a href="javascript:void 0" class="language">Python</a></li>
                        </ul>
                    </div>
                    <div class="row col-md-7 col-sm-7 col-xs-7">
                        <div class="col-md-3 col-md-offset-6 col-sm-6 col-xs-6"><button type="button" class="btn btn-info">获取最近提交代码</button></div>
                        <div class="col-md-3 col-sm-6 col-xs-6" style="padding-left: 50px;"><button type="button" class="btn btn-info">还原默认代码</button></div>
                    </div>

                </div>
                <div class="col-md-12 col-sm-12 col-xs-12" style="margin-top: 10px">
                    <textarea name="app" id="app" cols="30" rows="10">
 let app = document.querySelector("#app");
    let editor = CodeMirror.fromTextArea(app, {
        lineNumbers: true, //显示行数
        mode: 'javascript', // 编辑语言
        // theme: 'material',    //主题
        lint: true,

        spellcheck: true, //指定是否在输入上启用拼写检查。
        autocorrect: true, //指定是否在输入上启用自动更正。
        autocapitalize: true, //指定是否在输入上启用自动大写。

        tabSize: 4,   
        theme:"3024-night",   
        styleActiveLine: true,   
        line: true,
        foldgutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter","CodeMirror-lint-markers"],
        lineWrapping: true, //代码折叠         
        foldGutter: true,
        matchBrackets: true,  //括号匹配         
        autoCloseBrackets: true
    });
    editor.on('change', () => {
        console.log(editor.getValue());
    });
</textarea>
                </div>
                <div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3" style="margin-top: 10px">
                    <div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
                        <div class="col-md-5 col-md-offset-2 col-sm-5 col-sm-offset-2 col-xs-5 col-xs-offset-2"><button type="button" class="btn btn-default">执行代码</button></div>
                        <div class="col-md-5 col-sm-5 col-xs-5"><button type="button" class="btn btn-primary">提交代码</button></div>
                    </div>
                </div>
                <div class=""></div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../../../resources/static/js/contestCompile.js"></script>
</html>